<template>
  <div class="column q-gutter-y-sm" style="height: calc(100vh - 70px)">
    <div class="row ">
      <slot name="toolbar"></slot>

    </div>
    <div class="full-width col">
      <q-table
        :title="title"
        :data="tableData"
        :columns="columns"
        row-key="name"
        rows-per-page-label="每页条数："
        no-results-label="没有数据"
        no-data-label="没有数据"
        class="my-sticky-header-table"
        style="width: 100%;height: 100%"
        :rows-per-page-options="[30,50,100]"
        @request="onRequest"
        :loading="loading"
        :pagination.sync="pagination"
      >
        <template v-slot:top-right>
          <div class="row q-gutter-sm" v-if="typeof searchName === 'string'">
            <q-input filled borderless dense  v-model="filter" :placeholder="searchName" @keyup.enter.native="searchHandler">
              <template v-slot:append>
                <q-icon name="search" @click="searchHandler" />
              </template>
            </q-input>
            <q-btn  icon="cached" @click="Refresh"  />
          </div>
          <div class="row q-gutter-sm" v-else>
            <div v-for="(item,index) in filters" :key="index">
              <template v-if="item.type === 'string'">
                <q-input  filled borderless dense  v-model="item.filter" :placeholder="item.label" @keyup.enter.native="searchHandler" style="width: 140px" >
                </q-input>
              </template>
              <template v-else-if="item.type === 'select'">
                <q-select :label="item.label" square dense filled v-model="item.filter" :options="item.options" style="width: 140px" />
              </template>
            </div>

            <q-btn class="bg-blue-8 text-white" label="查询" @click="filtersHandler" v-if="filters.length > 0"  />
            <q-btn  icon="cached" @click="Refresh"  />
          </div>
<!--          <q-btn class="q-ml-sm" icon="filter_list" @click="show_filter=!show_filter" flat/>-->
        </template>
        <template v-slot:body="props">
          <q-tr :props="props" @dblclick="dbclick(props)">
            <q-td
              v-for="(col, index) in props.cols"
              :key="col.name"
              :props="props"
            >
              <template v-if="['avatar', 'imageUrls', 'imageUrl'].includes(col.name)">
                <q-img :style="col.style">
                  <template>
                    <img :src="baseurl+ JSON.parse(col.value)[0]" v-if="col.value.indexOf('{')> -1 && typeof JSON.parse(col.value) === 'object'" class="fit" :style="col.style" />

                    <img v-gallery :src="baseurl + col.value" v-else class="fit" :style="col.style" />
                  </template>
                </q-img>
              </template>
              <template v-else-if="'select' === col.name">
                <q-checkbox v-model="tableData[props.pageIndex][col.name]" @input="checkboxHandler" />
              </template>
              <template v-else-if="'file'===col.name">

              </template>
              <template v-else>{{ col.value }}</template>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </div>
  </div>
</template>

<script>
import website from "src/const/website";
export default {
  name: "TableBasic",
  props: ["title", "columns", "tableData", "searchName"],
  data() {
    return {
      loading: false,
      filter: '',
      show_filter: false,
      selected: [],
      baseurl: website.baseURL,
      pagination: {
        sortBy: 'desc',
        descending: false,
        page: 1,
        rowsPerPage: 30,
        rowsNumber: 10
      },
      filters: this.searchName
    }
  },
  computed:{
  },
  methods:{
    dbclick(evt,row,index){
      this.$emit("onDbclick", evt.pageIndex)
    },
    onRequest (props) {
      // this.loading = true
      const {page, rowsPerPage, sortBy, descending} = props.pagination
      const filter = props.filter
      this.$emit("updateTable", {page, rowsPerPage, sortBy, filter})

      this.pagination.page = page
      this.pagination.rowsPerPage = rowsPerPage
      this.pagination.sortBy = sortBy
      this.pagination.descending = descending
    },
    filtersHandler(){
      let s = {}
      let f = this.filters.map(r=>{
        switch(r.type){
          case 'select':
            s[r.key] =  r.filter.value
            break
          default:
             s[r.key] =  r.filter
            break;
        }
        return s
      })
      this.$emit("filtersHandler", s)
    },
    searchHandler(){
      this.$emit("searchHandler", this.filter)
    },
    checkboxHandler(item){

    },
    updatePagination(limit){
      // this.loading = false
      this.pagination.rowsNumber = limit
    },
    Refresh(){
      this.$emit("Refresh")
    }
  },
  mounted() {
  },
  created() {
    this.$bus.$on('UPDATE_PAGINATION', this.updatePagination)
  },
  beforeDestroy() {
    this.$bus.$off('UPDATE_PAGINATION', this.updatePagination)
  }
}
</script>

<style scoped>

</style>

<style lang="sass">
  .my-sticky-header-table
    height: 310px

    .q-table__top,
    .q-table__bottom,
    thead tr:first-child th
      background-color: white

    thead tr th
      position: sticky
      z-index: 1
    thead tr:first-child th
      top: 0

    &.q-table--loading thead tr:last-child th
      top: 48px
</style>
